<template>
	<view class="main">
		<view class="ul flex_row_wrap_between">
			<view class="li flex_col flex_center_align" :class="setMealIndex === index ? 'on' : ''"
				v-for="(item, index) in setMealList" :key="index" @click="chooseMeal(item, index)">
				<text class="ul-lname">{{ item.amount }}片小竹叶</text>
				<view class="ul-lp typeface">
					<text class="ul-la">￥</text>
					<text class="ul-lb">{{ item.name }}</text>
				</view>
			</view>
			<!-- <view class="li flex_column flex_center_align">
				<input class="li_input" v-model="payNum" v-if="setMealIndex === ''" type="text" :focus="setMealIndex === ''"
					placeholder="" maxlength="6">
				<text v-else class="custom" @click="setMealIndex = ''; payNum = ''">自定义</text>
			</view> -->
		</view>
		<view class="btn flex_center_align" @click="payClick">
			立即充值
		</view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/my/bambooLeaf/recharge"></script>

<style lang="scss">
.main {
	position: relative;
	height: 100vh;
	padding: 0 45rpx;
	background-color: #F8F8F8;
	overflow: hidden;

	.ul {
		.li {
			position: relative;
			margin-top: 30rpx;
			width: 310rpx;
			height: 172rpx;
			background: #FFFFFF;
			border-radius: 15rpx;

			&.on {
				background: #FFF4EB;
				border: 1px solid #FF8315;

				.ul-lp {
					color: #FA853C;
				}
			}

			.ul-lname {
				font-size: 26rpx;
			}

			.ul-lp {
				margin-top: 20rpx;
				color: #999;

				.ul-la {
					font-size: 26rpx;
				}

				.ul-lb {
					font-size: 45rpx;
				}
			}

			.li_input {
				width: 105rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-bottom: 1px solid #696969;
			}

			.custom {
				padding: 50rpx;
				font-size: 30rpx;
			}
		}
	}

	.btn {
		margin-top: 50rpx;
		height: 90rpx;
		background: #FF982A;
		border-radius: 45rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
}
</style>
